<template>
  <a-cascader :options="mOptions || []">
    <template v-for="item in slotKeys.filter(key=>props[key])" #[item]>
      <component :is="renderSlot(props,item)"/>
    </template>
  </a-cascader>
</template>
<script setup lang="ts">
import { PropType, VNode, onMounted, ref, watch } from 'vue';
import { renderSlot,requestData } from '../index'
import { DefaultOptionType } from 'ant-design-vue/lib/cascader';
const slotKeys = ['clearIcon','expandIcon','removeIcon','suffixIcon','tagRender','notFoundContent']
const props = defineProps({
  clearIcon: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  expandIcon: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  removeIcon: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  suffixIcon: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  tagRender: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  notFoundContent: {
    type: [String, Object, Function] as PropType<String | VNode |(()=>VNode | String)>
  },
  options: {
    type: [Array] as PropType<DefaultOptionType[]>
  },
  api: { // 接口地址或接口函数--->新增属性
    type: [Function, String] as PropType<((param: any)=>Promise<any>) | String>
  },
  params: {
    type: Object,
    default(){
      return {}
    }
  }
})
const mOptions = ref(props.options || [])
watch(()=>props.options,()=>{
  mOptions.value = (props.options || []) as any 
},{
  deep: true
})
onMounted(()=>{
  requestData(props.api,props.params).then(res=>{
    const v = res.data || res || []
    if(v instanceof Array) {
      mOptions.value = v
    }
  })
})
</script>
<style lang="less" scoped>

</style>